<template>
  <div class="select-month">
    <span class="span">统计时间:</span>
    <el-cascader v-model="monthValue" :options="options" @change="changeTime" size="mini" placeholder="请选择" clearable
      separator="年" style="width: 190px;"></el-cascader>
  </div>
</template>

<script>
export default {
  name: 'statisticalTimeTemp',
  data() {
    return {
      monthValue: '',
      options: []
    }
  },
  mounted() {
    this.initOptions();
  },
  methods: {
    initOptions() {
      const currentYear = new Date().getFullYear();
      const startYear = currentYear - 9;
      const endYear = currentYear + 1;

      for (let year = startYear; year <= endYear; year++) {
        const firstHalf = {
          value: `1-6月`,
          label: `1-6月`,
        };
        const secondHalf = {
          value: `7-12月`,
          label: `7-12月`,
        };
        this.options.push({
          value: year.toString(),
          label: year.toString(),
          children: [firstHalf, secondHalf],
        });
      }
    },
    // 时间改变
    changeTime(val) {
      if (val.length === 0) {
        this.$emit('changeTimeVal', '')
        return
      }
      const time = `${val[0]}年${val[1]}`
      this.$emit('changeTimeVal', time)
    },
  }
}
</script>

<style scoped lang="less">
.select-month {
  display: flex;
  height: 30px;
  align-items: center;

  .span {
    padding-right: 10px;
    width: 70px;
    display: inline-block;
  }
}
</style>
